<!--

    Copyright (c) 2015-2017 Red Hat, Inc.
    All rights reserved. This program and the accompanying materials
    are made available under the terms of the Eclipse Public License v1.0
    which accompanies this distribution, and is available at
    http://www.eclipse.org/legal/epl-v10.html

    Contributors:
      Red Hat, Inc. - initial API and implementation

-->
<md-content md-scroll-y flex
            md-theme="default"
            class="demo-components">
  <md-tabs md-selected="demoComponentsController.selectedIndex"
           md-dynamic-height
           md-stretch-tabs="auto"
           md-no-ink-bar>

    <md-tab label="Font"
            md-on-select="demoComponentsController.onSelectTab(demoComponentsController.tab.Font)">
      <p>Headings</p>
      <che-html-source>
        <h1>This is h1
          <small>Secondary text</small>
        </h1>
        <h2>This is h2
          <small>Secondary text</small>
        </h2>
        <h3>This is h3
          <small>Secondary text</small>
        </h3>
        <h4>This is h4
          <small>Secondary text</small>
        </h4>
        <h5>This is h5
          <small>Secondary text</small>
        </h5>
        <h6>This is h6
          <small>Secondary text</small>
        </h6>
      </che-html-source>
    </md-tab>

    <md-tab label="Panel"
            md-on-select="demoComponentsController.onSelectTab(demoComponentsController.tab.Panel)">
      <che-html-source>

        <che-panel che-title="My first panel"></che-panel>

        <che-panel che-title="Another panel"
                   che-title-icon="material-design icon-ic_check_box_outline_blank_24px"></che-panel>
        <che-panel che-title="Another panel" che-title-icon="material-design icon-ic_check_24px"></che-panel>
        <che-panel che-title="Yet another panel"><span>Haec igitur lex in amicitia sanciatur, ut neque rogemus res turpes nec faciamus rogati. Turpis enim excusatio est et minime accipienda cum in ceteris peccatis, tum si quis contra rem publicam se amici causa fecisse fateatur. Etenim eo loco, Fanni et Scaevola, locati sumus ut nos longe prospicere oporteat futuros casus rei publicae. Deflexit iam aliquantum de spatio curriculoque consuetudo maiorum.

Isdem diebus Apollinaris Domitiani gener, paulo ante agens palatii Caesaris curam, ad Mesopotamiam missus a socero per militares numeros immodice scrutabatur, an quaedam altiora meditantis iam Galli secreta susceperint scripta, qui conpertis Antiochiae gestis per minorem Armeniam lapsus Constantinopolim petit exindeque per protectores retractus artissime tenebatur.

Sed tamen haec cum ita tutius observentur, quidam vigore artuum inminuto rogati ad nuptias ubi aurum dextris manibus cavatis offertur, inpigre vel usque Spoletium pergunt. haec nobilium sunt instituta.

Dumque ibi diu moratur commeatus opperiens, quorum translationem ex Aquitania verni imbres solito crebriores prohibebant auctique torrentes, Herculanus advenit protector domesticus, Hermogenis ex magistro equitum filius, apud Constantinopolim, ut supra rettulimus, populari quondam turbela discerpti. quo verissime referente quae Gallus egerat, damnis super praeteritis maerens et futurorum timore suspensus angorem animi quam diu potuit emendabat.

Ultima Syriarum est Palaestina per intervalla magna protenta, cultis abundans terris et nitidis et civitates habens quasdam egregias, nullam nulli cedentem sed sibi vicissim velut ad perpendiculum aemulas: Caesaream, quam ad honorem Octaviani principis exaedificavit Herodes, et Eleutheropolim et Neapolim itidemque Ascalonem Gazam aevo superiore exstructas.</span>
        </che-panel>

      </che-html-source>
    </md-tab>

    <md-tab label="Selecter"
            md-on-select="demoComponentsController.onSelectTab(demoComponentsController.tab.Selecter)">
      <div>Selected book is {{demoComponentsController.selectedBook}}</div>

      <div layout="row" layout-wrap>
        <che-selecter ng-repeat="(author, books) in demoComponentsController.booksByAuthor"
                      ng-model="demoComponentsController.selectedBook"
                      che-values="books"
                      che-name="PickupBook"
                      che-title="{{author}}"
                      che-icon="fa fa-cube"
                      che-callback-controller="demoComponentsController"
                      che-options="book.title for book in values"/>
      </div>
    </md-tab>

    <md-tab label="Icons"
            md-on-select="demoComponentsController.onSelectTab(demoComponentsController.tab.Icons)">
      <div>Material design icons</div>
      <che-html-source>

        <md-icon md-font-icon="material-design icon-ic_account_balance_24px"></md-icon>
        <md-icon md-font-icon="material-design icon-ic_lock_24px"></md-icon>
        <md-icon md-font-icon="material-design icon-ic_lock_open_24px"></md-icon>
        <md-icon md-font-icon="chefont cheico-blank"></md-icon>
        <md-icon md-font-icon="chefont cheico-cpp"></md-icon>
        <md-icon md-font-icon="chefont cheico-java"></md-icon>
      </che-html-source>
      </div>
    </md-tab>

    <md-tab label="Buttons"
            md-on-select="demoComponentsController.onSelectTab(demoComponentsController.tab.Buttons)">
      <div layout="column">

        <!-- Cancel Button -->
        <textarea demo-source-render>
          <che-button-cancel-flat che-button-title="Cancel Button Flat"></che-button-cancel-flat>
        </textarea>

        <textarea demo-source-render>
          <che-button-cancel-flat che-button-title="Cancel Button Flat With Icon"
                                  che-button-icon="fa fa-ban"></che-button-cancel-flat>
        </textarea>

        <!-- Danger Button -->
        <textarea demo-source-render>
          <che-button-danger che-button-title="Danger Button"></che-button-danger>
        </textarea>

        <textarea demo-source-render>
          <che-button-danger che-button-title="Danger Button With Icon"
                             che-button-icon="fa fa-trash"></che-button-danger>
        </textarea>

        <!-- Default Button -->
        <textarea demo-source-render>
          <che-button-default che-button-title="Default Button"></che-button-default>
        </textarea>

        <textarea demo-source-render>
          <che-button-default che-button-title="Default Button With Icon"
                              che-button-icon="fa fa-check-square"></che-button-default>
        </textarea>

        <!-- Notice Button -->
        <textarea demo-source-render="">
          <che-button-notice che-button-title="Notice Button"></che-button-notice>
        </textarea>

        <textarea demo-source-render="">
          <che-button-notice che-button-title="Notice Button With Icon"
                             che-button-icon="fa fa-check-square"></che-button-notice>
        </textarea>

        <!-- Primary Button -->
        <textarea demo-source-render="">
          <che-button-primary che-button-title="Primary Button"></che-button-primary>
        </textarea>

        <textarea demo-source-render="">
          <che-button-primary che-button-title="Primary Button With Icon"
                              che-button-icon="fa fa-file-text-o"></che-button-primary>
        </textarea>

        <!-- Primary Button Flat -->
        <textarea demo-source-render="">
          <che-button-primary-flat che-button-title="Primary Button Flat"></che-button-primary-flat>
        </textarea>

        <textarea demo-source-render="">
          <che-button-primary-flat che-button-title="Primary Button Flat With Icon"
                                   che-button-icon="fa fa-file-text-o"></che-button-primary-flat>
        </textarea>

        <!-- Save Button -->
        <textarea demo-source-render="">
          <che-button-save-flat che-button-title="Save Button Flat"></che-button-save-flat>
        </textarea>

        <textarea demo-source-render="">
          <che-button-save-flat che-button-title="Save Button Flat With Icon"
                                che-button-icon="fa fa-floppy-o"></che-button-save-flat>
        </textarea>

        <!-- Warning Button -->
        <textarea demo-source-render="">
          <che-button-warning che-button-title="Warning Button"></che-button-warning>
        </textarea>

        <textarea demo-source-render="">
          <che-button-warning che-button-title="Warning Button"
                              che-button-icon="fa fa-trash"></che-button-warning>
        </textarea>

        <p>Selected value of toggle is : {{demoComponentsController.selectedToggle}}</p>
        <che-toggle ng-init="demoComponentsController.selectedToggle='Public'"
                    ng-model="demoComponentsController.selectedToggle">
          <che-toggle-button che-font-icon="fa fa-lock" che-title="Public"></che-toggle-button>
          <che-toggle-button che-font-icon="fa fa-unlock" che-title="Private"></che-toggle-button>
        </che-toggle>

      </div>
    </md-tab>

    <md-tab label="Input"
            md-on-select="demoComponentsController.onSelectTab(demoComponentsController.tab.Input)">
      <ng-form name="demoForm">
        <textarea demo-source-render>
          model value: {{demoComponentsController.number}}<br/>
          <!-- <che-number-spinner> -->

          <che-number-spinner che-form="demoForm"
                              che-name="spin"
                              che-step="5"
                              che-tofixed="2"
                              che-minvalue="0"
                              che-maxvalue="99"
                              che-unit="GB"
                              ng-model="demoComponentsController.number"
                              ng-change="demoComponentsController.numberChanged()"
                              required>
          <div ng-message="required">A value is required.</div>
          <div ng-message="min">The value has to be greater than 0.</div>
          <div ng-message="max">The value has to be less than 99.</div>
          </che-number-spinner>

        </textarea>

        <textarea demo-source-render>
          <div layout="column">
            <label>Readonly: <input type="checkbox" ng-model="readonly"></label>
            <label>Disabled: <input type="checkbox" ng-model="disabled"></label>
          </div>

          <!-- che-input -->

          <che-input che-form="demoForm"
                     che-name="demoinput"
                     che-label-name="Name"
                     che-place-holder="Name of this demo"
                     ng-model="demoComponentsCtrl.selectedInput"
                     ng-model="demoComponentsController.demoInput"
                     che-readonly="readonly"
                     che-disabled="disabled">
          </che-input>

        </textarea>

        <textarea demo-source-render>
          <!-- che-input -->
          <!-- type="number" -->

          <che-input che-form="demoForm"
                     che-name="demoinput2"
                     che-place-holder="Name of this demo"
                     ng-model="demoComponentsController.demoInput"
                     type="number">
          </che-input>
        </textarea>

        <textarea demo-source-render>
          <!-- che-input -->
          <!-- validation messages -->

          <che-input che-form="demoForm"
                     che-name="demoinput2"
                     che-place-holder="Name of this demo"
                     ng-model="demoComponentsController.demoInput"
                     ng-minlength="3"
                     ng-maxlength="8"
                     required
                     ng-maxlength="128"
                     ng-pattern="/^[A-Za-z0-9_\-\.]+$/">
            <div ng-message="required">A name is required.</div>
            <div ng-message="pattern">The name should not contain special characters like space, dollar, etc.</div>
            <div ng-message="maxlength">The name has to be less than 128 characters long.</div>
            <div ng-message="md-maxlength">The name has to be less than 128 characters long.</div>
            <div ng-message="minlength">The value has to be more than 3 characters long.</div>
            <div ng-message="maxlength">The value has to be less than 8 characters long.</div>
            <div ng-message="pattern">The name value not contain special characters like space, dollar, etc.</div>
            <div ng-message="required">A value is required.</div>
          </che-input>
        </textarea>

        <textarea demo-source-render>
          <!-- che-textarea -->

          <che-textarea che-form="demoForm"
                        che-name="demotextarea"
                        che-place-holder="Text"
                        ng-model="demoComponentsController.demoTextarea">
          </che-textarea>
        </textarea>
      </ng-form>
    </md-tab>

    <md-tab label="List"
            md-on-select="demoComponentsController.onSelectTab(demoComponentsController.tab.List)">
      <div layout="column">
        <che-html-source>

          <che-list style="margin: 10px; width: 200px">
            <che-list-item ng-repeat="document in demoComponentsController.listItemsDocs">
              <div layout="row" flex="100" style="height: 24px; margin: 5px">
                <che-list-item-checked flex="20" che-icon="md-font fa fa-file-text-o"
                                       style="font-size: 20px"></che-list-item-checked>
                <div flex="80" style="height: 20px">{{document}}</div>
              </div>
            </che-list-item>
          </che-list>

          <che-list style="margin: 10px; width: 200px">
            <che-list-item ng-repeat="task in demoComponentsController.listItemsTasks">
              <div layout="row" flex="100" style="height: 24px; margin: 5px">
                <div flex="70">{{task.name}}</div>
                <che-list-item-checked flex="30" ng-model="task.done"></che-list-item-checked>
              </div>
            </che-list-item>
          </che-list>
        </che-html-source>
      </div>
    </md-tab>

    <md-tab label="Label Container"
            md-on-select="demoComponentsController.onSelectTab(demoComponentsController.tab.Label_container)">
      <div layout="column">
        <textarea demo-source-render>
          <!-- che-label-container -->

          <che-label-container che-label-name="container name"
                               che-label-description="This text describes container content.">
            <p>
             Mel no ullum appareat, est ex virtute indoctum, duo fabulas epicuri principes at. Vis option recteque vulputate eu, harum voluptaria intellegebat pro in, vix cu graeci vivendum intellegebat. Ius docendi invidunt convenire ad. Nam nibh expetendis cu, congue molestiae dissentiunt pri eu, eu virtute alterum repudiandae nec. Te eam vitae libris, nec ut suas errem volumus, ei numquam phaedrum rationibus pri. Verear dissentiunt theophrastus eum ex, ex adhuc appareat moderatius est.
            </p>
          </che-label-container>

        </textarea>

        <textarea demo-source-render>
          <!-- che-label-container -->
          <!-- changes layout on 'gt-sm' breakpoint -->

          <che-label-container che-label-name="container name"
                               che-label-description="This text describes container content."
                               che-transclude-layout="true"
                               layout="column" layout-gt-sm="row">
            <p>
             Mel no ullum appareat, est ex virtute indoctum, duo fabulas epicuri principes at. Vis option recteque vulputate eu, harum voluptaria intellegebat pro in, vix cu graeci vivendum intellegebat. Ius docendi invidunt convenire ad. Nam nibh expetendis cu, congue molestiae dissentiunt pri eu, eu virtute alterum repudiandae nec. Te eam vitae libris, nec ut suas errem volumus, ei numquam phaedrum rationibus pri. Verear dissentiunt theophrastus eum ex, ex adhuc appareat moderatius est.
            </p>
          </che-label-container>

        </textarea>

        <textarea demo-source-render>
          <!-- che-label-container -->
          <!-- aligning of che-input -->

          <che-label-container che-label-name="container name"
                               che-label-description="This text describes container content."
                               che-transclude-layout="true"
                               layout="column" layout-gt-sm="row">
            <div style="margin-top: -12px;">
              <ng-form name="demoForm">
              <che-input che-form="demoForm"
                         che-name="demoinput3"
                         che-place-holder="Name of this demo"
                         ng-model="demoComponentsController.demoInput"
                         required>
                <div ng-message="required">A name is required.</div>
              </che-input>
              </ng-form>
            </div>
            <p>
             Mel no ullum appareat, est ex virtute indoctum, duo fabulas epicuri principes at. Vis option recteque vulputate eu, harum voluptaria intellegebat pro in, vix cu graeci vivendum intellegebat. Ius docendi invidunt convenire ad. Nam nibh expetendis cu, congue molestiae dissentiunt pri eu, eu virtute alterum repudiandae nec. Te eam vitae libris, nec ut suas errem volumus, ei numquam phaedrum rationibus pri. Verear dissentiunt theophrastus eum ex, ex adhuc appareat moderatius est.
            </p>
          </che-label-container>
        </textarea>
      </div>
    </md-tab>

    <md-tab label="Stack Selector"
            md-on-select="demoComponentsController.onSelectTab(demoComponentsController.tab.Stack_selector)">
      <div layout="column">
        <che-label-container
          che-label-name="{{createProjectCtrl.workspaces.length ? 'Select Workspace' : 'Select Stack'}}"
          che-label-description="{{createProjectCtrl.workspaces.length ? 'Select existing workspace or create it from stack' : 'Select stack'}}, recipe or image used to define your environment runtime. Workspace environments are used to build and run your project.">
          <stack-selector></stack-selector>
        </che-label-container>
      </div>
    </md-tab>
    <md-tab label="Popover"
            md-on-select="demoComponentsController.onSelectTab(demoComponentsController.tab.Popover)">
      <textarea demo-source-render>
        <!-- toggle-button-popover -->
        <toggle-button-popover button-title="PopupTags"
                               button-value="isOpen"
                               button-font-icon="fa fa-sliders">
          <che-stack-library-filter stack-tags="['tag1', 'tag2', 'tag3', 'tag4']"
                                    selected-tags="selectedTags">
          </che-stack-library-filter>
        </toggle-button-popover>
        <button class="btn btn-default" ng-click="isOpen = !isOpen">Change popover state</button>
      </textarea>
      <p>
        <label><h4>Popover placement</h4></label>
        <select class="form-control" ng-model="demoComponentsController.placement.selected"
                ng-options="options as options for options in demoComponentsController.placement.options"></select>
      </p>
      <textarea demo-source-render>
        <!-- html-popover-placement -->
        <button popover-placement="{{demoComponentsController.placement.selected}}"
                uib-popover-html="'<b>HTML!!!</b>, <i>inline</i>'"
                class="btn btn-default">HTML Popover (inline)</button>
      </textarea>
    </md-tab>
  </md-tabs>
</md-content>
